<template>
  <div class="home-container">
    <!-- 顶部统计卡片 -->
    <el-row :gutter="24" class="stats-row">
      <el-col :span="6">
        <el-card shadow="hover" class="stats-card">
          <div class="stats-icon">
            <i class="el-icon-document"></i>
          </div>
          <div class="stats-info">
            <div class="stats-title">公告总数</div>
            <div class="stats-number">{{totalAnnouncements}}</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="stats-card">
          <div class="stats-icon blue">
            <i class="el-icon-date"></i>
          </div>
          <div class="stats-info">
            <div class="stats-title">今日发布</div>
            <div class="stats-number">{{todayAnnouncements}}</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="stats-card">
          <div class="stats-icon green">
            <i class="el-icon-user"></i>
          </div>
          <div class="stats-info">
            <div class="stats-title">用户总数</div>
            <div class="stats-number">{{totalUsers}}</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="stats-card">
          <div class="stats-icon orange">
            <i class="el-icon-view"></i>
          </div>
          <div class="stats-info">
            <div class="stats-title">总访问量</div>
            <div class="stats-number">{{totalViews}}</div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 主要内容区域 -->
    <el-row :gutter="24" class="main-content">
      <!-- 左侧公告列表 -->
      <el-col :span="16">
        <el-card class="announcement-list" shadow="hover">
          <div slot="header" class="card-header">
            <span class="header-title">最新公告</span>
            <el-button type="primary" icon="el-icon-plus" size="small" @click="addAnnouncement">发布公告</el-button>
          </div>
          <div v-if="announcements.length > 0">
            <div v-for="item in announcements" :key="item.id" class="announcement-item" @click="viewDetail(item.id)">
              <el-row>
                <el-col :span="18">
                  <div class="announcement-title">
                    <i class="el-icon-bell"></i>
                    {{item.gonggaobiaoti}}
                  </div>
                  <div class="announcement-meta">
                    <span class="date"><i class="el-icon-time"></i> {{item.faburiqi}}</span>
                  </div>
                </el-col>
                <el-col :span="6" v-if="item.tupian">
                  <el-image 
                    :src="item.tupian.split(',')[0]" 
                    fit="cover"
                    class="announcement-image"
                    @click.stop="previewImage(item.tupian)">
                  </el-image>
                </el-col>
              </el-row>
            </div>
          </div>
          <div v-else class="empty-state">
            <i class="el-icon-document"></i>
            <p>暂无公告</p>
          </div>
        </el-card>
      </el-col>
      
      <!-- 右侧日历 -->
      <el-col :span="8">
        <el-card class="calendar-card" shadow="hover">
          <div slot="header" class="card-header">
            <span class="header-title">日历</span>
          </div>
          <el-calendar v-model="currentDate">
          </el-calendar>
        </el-card>
      </el-col>
    </el-row>

    <!-- 图片预览对话框 -->
    <el-dialog :visible.sync="previewVisible" append-to-body width="800px">
      <img width="100%" :src="previewUrl" alt="Preview">
    </el-dialog>

    <!-- 发布公告对话框 -->
    <el-dialog 
      title="发布公告" 
      :visible.sync="addDialogVisible" 
      width="800px" 
      append-to-body
      custom-class="publish-dialog"
    >
      <el-form :model="addForm" :rules="addRules" ref="addForm" label-width="100px" size="medium">
        <el-form-item label="公告标题" prop="gonggaobiaoti">
          <el-input v-model="addForm.gonggaobiaoti" placeholder="请输入公告标题" style="width: 650px;"></el-input>
        </el-form-item>
        <el-form-item label="图片" prop="tupian">
          <file-upload
            tip="点击上传图片"
            action="file/upload"
            :limit="3"
            :multiple="true"
            :fileUrls="addForm.tupian"
            @change="uploadChange"
            style="width: 650px;"
          ></file-upload>
        </el-form-item>
        <el-form-item label="内容" prop="neirong">
          <editor
            style="min-height: 300px; width: 650px; max-height: 500px; overflow-y: auto;"
            v-model="addForm.neirong"
            class="editor"
            action="file/upload">
          </editor>
        </el-form-item>
        <el-form-item label="发布日期" prop="faburiqi">
          <el-date-picker
            v-model="addForm.faburiqi"
            type="date"
            placeholder="选择发布日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            style="width: 200px;">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="medium" @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" size="medium" @click="submitAdd">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 公告内容对话框 -->
    <el-dialog
      title="公告内容"
      :visible.sync="noticeDialogVisible"
      width="700px"
      append-to-body
      custom-class="notice-dialog">
      <div class="notice-content" v-html="noticeContent"></div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="noticeDialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import router from '@/router/router-static'
export default {
  data() {
    return {
      totalAnnouncements: 0,
      todayAnnouncements: 0,
      totalUsers: 0,
      totalViews: 0,
      announcements: [],
      currentDate: new Date(),
      previewVisible: false,
      previewUrl: '',
      addDialogVisible: false,
      addForm: {
        gonggaobiaoti: '',
        tupian: '',
        neirong: '',
        faburiqi: ''
      },
      addRules: {
        gonggaobiaoti: [
          { required: true, message: '请输入公告标题', trigger: 'blur' }
        ],
        neirong: [
          { required: true, message: '请输入公告内容', trigger: 'blur' }
        ],
        faburiqi: [
          { required: true, message: '请选择发布日期', trigger: 'blur' }
        ]
      },
      noticeDialogVisible: false,
      noticeContent: ''
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      if(this.$storage.get('Token')){
        this.$http({
          url: `${this.$storage.get('sessionTable')}/session`,
          method: "get"
        }).then(({ data }) => {
          if (data && data.code != 0) {
            router.push({ name: 'login' })
          } else {
            this.getStatistics()
            this.getAnnouncements()
          }
        });
      } else {
        router.push({ name: 'login' })
      }
    },
    // 获取统计数据
    getStatistics() {
      this.$http({
        url: 'gonggaoxinxi/statistics',
        method: 'get'
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.totalAnnouncements = data.data.total || 0
          this.todayAnnouncements = data.data.today || 0
          this.totalUsers = data.data.users || 0
          this.totalViews = data.data.views || 0
        }
      })
    },
    // 获取公告列表
    getAnnouncements() {
      this.$http({
        url: 'gonggaoxinxi/page',
        method: 'get',
        params: {
          page: 1,
          limit: 5,
          sort: 'faburiqi',
          order: 'desc'
        }
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.announcements = data.data.list
        }
      })
    },
    // 预览图片
    previewImage(images) {
      if (!images) return
      this.previewUrl = images.split(',')[0]
      this.previewVisible = true
    },
    // 查看公告详情
    viewDetail(id) {
      const notice = this.announcements.find(item => item.id === id);
      if (notice) {
        this.noticeContent = notice.neirong;
        this.noticeDialogVisible = true;
      }
    },
    // 发布公告
    addAnnouncement() {
      this.addForm = {
        gonggaobiaoti: '',
        tupian: '',
        neirong: '',
        faburiqi: new Date().toISOString().split('T')[0]
      }
      this.addDialogVisible = true
    },
    // 图片上传改变
    uploadChange(fileUrls) {
      this.addForm.tupian = fileUrls
    },
    // 提交添加
    submitAdd() {
      this.$refs.addForm.validate(valid => {
        if (valid) {
          this.$http({
            url: 'gonggaoxinxi/add',
            method: 'post',
            data: this.addForm
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.$message({
                message: '发布成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.addDialogVisible = false
                  this.getAnnouncements()
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.home-container {
  padding: 24px;
  background-color: #f0f2f5;
  min-height: calc(100vh - 100px);

  .stats-row {
    margin-bottom: 24px;

    .stats-card {
      display: flex;
      align-items: center;
      padding: 20px;
      transition: all 0.3s;
      background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
      border: none;

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
      }

      .stats-icon {
        width: 60px;
        height: 60px;
        border-radius: 15px;
        background: linear-gradient(135deg, #ff6b6b 0%, #ff8e8e 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 16px;
        box-shadow: 0 4px 8px rgba(255,107,107,0.2);

        i {
          font-size: 30px;
          color: #fff;
        }

        &.blue { 
          background: linear-gradient(135deg, #4ecdc4 0%, #6cddd6 100%);
          box-shadow: 0 4px 8px rgba(78,205,196,0.2);
        }
        &.green { 
          background: linear-gradient(135deg, #45b7af 0%, #65c9c2 100%);
          box-shadow: 0 4px 8px rgba(69,183,175,0.2);
        }
        &.orange { 
          background: linear-gradient(135deg, #ff9f43 0%, #ffb976 100%);
          box-shadow: 0 4px 8px rgba(255,159,67,0.2);
        }
      }

      .stats-info {
        .stats-title {
          font-size: 15px;
          color: #666;
          margin-bottom: 10px;
        }
        .stats-number {
          font-size: 32px;
          font-weight: bold;
          background: linear-gradient(135deg, #333 0%, #666 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }
    }
  }

  .main-content {
    .announcement-list {
      background: #fff;
      border-radius: 12px;
      box-shadow: 0 2px 12px rgba(0,0,0,0.05);
      transition: all 0.3s;

      &:hover {
        box-shadow: 0 4px 16px rgba(0,0,0,0.1);
      }

      .card-header {
        border-bottom: 1px solid #eee;
        padding: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .header-title {
          font-size: 20px;
          font-weight: bold;
          color: #333;
          position: relative;
          padding-left: 12px;

          &:before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 4px;
            height: 20px;
            background: linear-gradient(135deg, #ff6b6b 0%, #ff8e8e 100%);
            border-radius: 2px;
          }
        }
      }

      .announcement-item {
        padding: 20px;
        border-bottom: 1px solid #eee;
        cursor: pointer;
        transition: all 0.3s;

        &:last-child {
          border-bottom: none;
        }

        &:hover {
          background-color: #f8f9fa;
          transform: translateX(5px);
        }

        .announcement-title {
          font-size: 16px;
          font-weight: 500;
          color: #333;
          margin-bottom: 12px;
          display: flex;
          align-items: center;

          i {
            margin-right: 8px;
            color: #ff9f43;
            font-size: 18px;
          }
        }

        .announcement-meta {
          font-size: 13px;
          color: #999;

          .date {
            display: flex;
            align-items: center;
            i {
              margin-right: 4px;
            }
          }
        }

        .announcement-image {
          width: 140px;
          height: 90px;
          border-radius: 8px;
          object-fit: cover;
          transition: all 0.3s;
          box-shadow: 0 2px 8px rgba(0,0,0,0.1);

          &:hover {
            transform: scale(1.05);
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
          }
        }
      }

      .empty-state {
        text-align: center;
        padding: 60px 0;
        color: #999;

        i {
          font-size: 60px;
          margin-bottom: 15px;
          background: linear-gradient(135deg, #ff6b6b 0%, #ff8e8e 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }

        p {
          font-size: 15px;
        }
      }
    }

    .calendar-card {
      background: #fff;
      border-radius: 12px;
      box-shadow: 0 2px 12px rgba(0,0,0,0.05);
      transition: all 0.3s;

      &:hover {
        box-shadow: 0 4px 16px rgba(0,0,0,0.1);
      }

      .card-header {
        border-bottom: 1px solid #eee;
        padding: 20px;

        .header-title {
          font-size: 20px;
          font-weight: bold;
          color: #333;
          position: relative;
          padding-left: 12px;

          &:before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 4px;
            height: 20px;
            background: linear-gradient(135deg, #4ecdc4 0%, #6cddd6 100%);
            border-radius: 2px;
          }
        }
      }

      ::v-deep .el-calendar {
        .el-calendar__header {
          padding: 15px 20px;
        }
        .el-calendar__body {
          padding: 15px 20px 20px;
        }
        .el-calendar-table {
          td {
            &.is-today {
              .el-calendar-day {
                background: #f0f9f8;
                color: #4ecdc4;
                font-weight: bold;
              }
            }
          }
        }
      }
    }
  }
}

// 响应式布局
@media screen and (max-width: 1200px) {
  .home-container {
    padding: 16px;
    
    .stats-row {
      .el-col {
        margin-bottom: 16px;
      }
    }
    .main-content {
      .el-col {
        width: 100%;
        margin-bottom: 16px;
      }
    }
  }
}

.publish-dialog {
  /deep/ .el-dialog__body {
    padding: 20px 30px;
    max-height: 75vh;
    overflow-y: auto;
  }

  /deep/ .el-form-item {
    margin-bottom: 22px;
    position: relative;
    z-index: 1;
    
    .el-form-item__label {
      font-weight: 500;
      color: #333;
    }
  }

  /deep/ .editor {
    border: 1px solid #DCDFE6;
    border-radius: 4px;
    position: relative;
    z-index: 1;
    background: #fff;
    
    &:hover {
      border-color: #C0C4CC;
    }
    
    &:focus {
      border-color: #409EFF;
    }

    & > div {
      max-height: 450px;
      overflow-y: auto;
    }
  }

  /deep/ .dialog-footer {
    text-align: center;
    padding-top: 10px;
    position: relative;
    z-index: 2;
    background: #fff;
    
    .el-button {
      padding: 12px 25px;
      font-size: 14px;
    }
  }
}

.notice-dialog {
  /deep/ .el-dialog__header {
    text-align: center;
    font-size: 22px;
    font-weight: bold;
    color: #333;
    background: linear-gradient(90deg, #f8fafc 60%, #e3f0ff 100%);
    border-bottom: 1px solid #f0f0f0;
    padding: 24px 0 16px 0;
  }
  /deep/ .el-dialog__body {
    background: #f9f9fb;
    border-radius: 12px;
    padding: 32px 36px 24px 36px;
    min-height: 180px;
  }
  /deep/ .el-dialog__footer {
    text-align: center;
    background: #f9f9fb;
    border-top: 1px solid #f0f0f0;
    padding: 18px 0 18px 0;
  }
}
.notice-content {
  font-size: 15px;
  color: #444;
  line-height: 2;
  letter-spacing: 0.2px;
  word-break: break-all;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  padding: 24px 20px;
  margin: 0 auto;
  max-width: 600px;
}
.notice-content p {
  margin: 16px 0;
}
.notice-content img {
  max-width: 100%;
  border-radius: 6px;
  margin: 12px 0;
  display: block;
}
</style>